<template>
  <div class="config-bar">
    <!-- Warning -->
    <!-- <el-badge
    :class="[flowStore.widgetContent.count > 0 ? 'vibrate-hard' : '']"
    :value="flowStore.widgetContent.count"
    :type="flowStore.widgetContent.type"
    :show-zero="false"
    :offset="[4, 0]"
  > -->
    <el-button
      :class="[flowStore.widgetContent.count > 0 ? 'vibrate-slight' : '']"
      :type="flowStore.widgetContent.type"
      size="small"
      link
      @click="
        () => {
          flowStore.widgetContent.showDataViewer =
            !flowStore.widgetContent.showDataViewer;
          if (flowStore.widgetContent.showDataViewer) {
            commonStore.showSidebar = true;
          }
        }
      "
    >
      <el-icon><Bell /></el-icon>
      <span>提醒</span>
      <span v-if="flowStore.widgetContent.count > 0" style="padding-left: 4px"
        >({{ flowStore.widgetContent.count }})</span
      >
    </el-button>
    <!-- </el-badge> -->
    <!-- Snapshot -->
    <el-button
      type="primary"
      size="small"
      link
      @click="
        flowStore.chartConfig.gnenralChart.showSnapshot =
          !flowStore.chartConfig.gnenralChart.showSnapshot
      "
    >
      <el-icon><Camera /></el-icon>
      <span>快照</span>
    </el-button>

    <el-divider direction="vertical" />

    <!-- fast setting -->
    <!-- <el-text size="small">粒度</el-text> -->
    <el-radio-group
      v-model="flowStore.chartConfig.gnenralChart.dataGranularity"
      @change="handleGranularityChange"
      size="small"
    >
      <el-radio-button :value="1">15分钟</el-radio-button>
      <el-radio-button :value="2">30分钟</el-radio-button>
      <el-radio-button :value="4">60分钟</el-radio-button>
      <el-radio-button :value="5">60'BKB</el-radio-button>
    </el-radio-group>

    <!-- <el-text size="small" style="margin-left: 12px">间隔</el-text>
    <el-radio-group
      v-model="flowStore.chartConfig.gnenralChart.dataInterval"
      @change="handleIntervalChange"
      size="small"
    >
      <el-radio-button :value="1">15分钟</el-radio-button>
      <el-radio-button :value="2">30分钟</el-radio-button>
      <el-radio-button :value="4">60分钟</el-radio-button>
    </el-radio-group>
    <el-text size="small" style="margin-left: 12px">步长</el-text>
    <el-radio-group
      v-model="flowStore.chartConfig.gnenralChart.dataStep"
      @change="handleStepChange"
      size="small"
    >
      <el-radio-button :value="1">15分钟</el-radio-button>
      <el-radio-button :value="2">30分钟</el-radio-button>
      <el-radio-button :value="4">60分钟</el-radio-button>
    </el-radio-group>
    <el-divider direction="vertical" /> -->

    <!-- Config -->
    <el-divider direction="vertical" />
    <el-button
      type="primary"
      size="small"
      @click="
        flowStore.chartConfig.gnenralChart.showConfig =
          !flowStore.chartConfig.gnenralChart.showConfig
      "
    >
      <el-icon><Tools /></el-icon>
      <span>图表设置</span>
    </el-button>

    <!-- <el-switch
    size="small"
    v-model="flowStore.useExperimentPolicy"
    style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
    active-text="模型Ⅲ(测试)"
    inactive-text="模型Ⅱ"
  /> -->
  </div>
</template>

<script setup>
import useFlowStore from "@/store/flow.js";
const flowStore = useFlowStore();

const emits = defineEmits([
  "chartRefresh",
  "handleGranularityChange",
  "handleIntervalChange",
  "handleStepChange",
  "handleTypeChange",
]);

const chartRefresh = () => {
  emits("chartRefresh");
};
const handleGranularityChange = () => {
  emits("handleGranularityChange");
};
const handleIntervalChange = () => {
  emits("handleIntervalChange");
};
const handleStepChange = () => {
  emits("handleStepChange");
};
const handleTypeChange = () => {
  emits("handleTypeChange");
};
</script>

<style scoped>
@import "@/styles/vibrate.css";

.config-bar {
  position: fixed;
  right: 30px;
  top: 110px;
  z-index: 9;
  display: flex;
  align-items: center;
  background-color: var(--el-bg-color-overlay);
}

.config-bar > * {
  margin: 0 12px;
}
</style>
